<template>
  <a-config-provider :locale="locale">
    <div id="vuemain" v-if="showLayout">
      <LayoutHeader />
      <div class="mainBox">
        <LayoutLeftMenu v-if="this.showLeftBlock" />
        <div
          class="vueContainer"
          :class="[menuStatus === 'OPEN' && isGotoMacc3Hash ? 'open-menu' : '']"
        >
          <div
            class="extend-menu-bar"
            v-if="showTopGroupBlock && theme != 'NOC'"
          >
            <LayoutGroup :theme="theme"></LayoutGroup>
          </div>
          <div
            v-show="showGroupBar"
            v-if="theme == 'NOC'"
            style="margin: 0 16px; margin-top: 10px"
          >
            <LayoutGroup
              :theme="theme"
              style="width: 100%; position: relative"
            ></LayoutGroup>
          </div>

          <div :class="['router-view-main', getFull()]">
            <router-view class="mainContent" v-if="isRouterAlive" />
          </div>
        </div>
      </div>
      <Feeback />
      <ReceiveNet v-if="showReviceVisible" :shareCode="shareCode" />
    </div>
    <!-- 因布局问题，做e-sharing页面兼容 -->
    <div id="vuemain" v-else>
      <router-view
        class="mainContent"
        style="width: 100%"
        v-if="isRouterAlive"
      />
    </div>
  </a-config-provider>
</template>
<script>
import { mapState } from 'vuex';
import { requestHttp, maccApi, SysConf } from '@utils/index';
import { LayoutHeader, LayoutLeftMenu, ReceiveNet } from '@components';
import Feeback from '@views/system/feeback/index.vue';
export default {
  name: 'Main',
  data() {
    let showLayout = !top.location.href.includes('acceptSharing');
    return {
      isRouterAlive: false,
      showLayout,
      showReviceVisible: false,
      recommendUpgradeTips: {
        show: false,
        recommendUpgradeList: {},
      },
    };
  },
  components: {
    LayoutHeader,
    LayoutLeftMenu,
    Feeback,
    ReceiveNet,
  },
  created() {},
  async mounted() {
    await this.checkExperienceProject();
    this.isRouterAlive = true;

    //接受分享网络
    this.isNeedShowNetRevice();
  },

  methods: {
    getFull() {
      return this.$route.query.full ? 'full' : '';
    },

    async acceptEasySharing(sharingCode) {
      const param = {
        email: this.userInfo.account,
      };
      const { code, data } = await requestHttp({
        api: `${maccApi.EASYSHARING_ACCEPT_GET_API}`,
        method: 'GET',
        querys: {
          code: sharingCode,
        },
      });

      if (code != 0) {
        return null;
      } else {
        return data;
      }
    },

    async isNeedAceeptEasySharing() {
      const param = {
        email: this.userInfo.account,
      };
      const { code, data } = await requestHttp({
        api: `${maccApi.EASYSHARING_BIND_POST_API}`,
        method: 'POST',
        params: param,
      });

      if (code != 0) {
        return null;
      } else {
        return data;
      }
    },

    isNeedShowNetRevice() {
      const { shareCode } = this.$route.query;
      if (shareCode) {
        this.shareCode = shareCode;
        this.showReviceVisible = true;
      }
    },

    //判断是否是体验项目
    async checkExperienceProject() {
      if (this.groupId) {
        const { code, data } = await requestHttp({
          api: `${maccApi.CHECK_IS_EXPERIENCE_PROJECT}?groupId=${this.groupId}`,
          method: 'GET',
        });
        if (code != 0) {
          // this.$message.warning(msg);
          return;
        }
        this.$store.commit('Group/SET_FLAG_EXPERIENCE_NET', data);
      }
    },
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(() => {
        this.isRouterAlive = true;
      });
    },
    handelRecommendClose() {
      this.recommendUpgradeTips.show = false;
    },

    /**
     * @description: 设置CookieTip状态
     * @return {*}
     */
    setCookieTip() {
      let cookieTip = localStorage.getItem('cookieTip');
      const cookieTipUserMap = cookieTip ? JSON.parse(cookieTip) : {};
      if (!cookieTipUserMap[this.userInfo.accountId]) {
        cookieTipUserMap[this.userInfo.accountId] = this.userInfo.accountId;
      }
      window.localStorage.setItem(
        'cookieTip',
        JSON.stringify(cookieTipUserMap)
      );
    },
  },
  computed: {
    ...mapState('Layout', ['layOutStyle']),
    ...mapState('I18n', ['lang']),
    ...mapState('Group', ['groupId']),
    ...mapState('Theme', ['theme']),
    ...mapState('IntlTemp', ['menuStatus', 'isGotoMacc3Hash']),
    ...mapState('User', ['userInfo']),

    locale() {
      return this.$i18n.getLocaleMessage(this.lang).antLocale;
    },

    //是否显示顶部菜单
    showTopBlock() {
      return ['BOTH', 'TOP_MENU'].indexOf(this.layOutStyle) != -1;
    },
    //是否显示左侧菜单
    showLeftBlock() {
      return ['BOTH', 'LEFT_MENU'].indexOf(this.layOutStyle) != -1;
    },
    //是否显示头部的分组
    showTopGroupBlock() {
      return ['TOPBAR'].indexOf(this.layOutStyle) != -1;
    },

    //是否显示groupBar （当内嵌在macc中，或者noc主题时显示groupbar 方便本地开发）
    showGroupBar() {
      // if (['/', '/topomarkup'].indexOf(this.$route.path) > -1) {
      //   return false;
      // }
      if (window.top?.base?.mpm === 'intl_public') {
        return false;
      } else {
        return self !== parent;
      }
    },
  },
  watch: {
    async groupId() {
      if (['/'].indexOf(this.$route.path) == -1) {
        await this.checkExperienceProject();
        this.reload();
      }
    },
  },
};
</script>

<style lang="less" scoped>
#vuemain {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  .router-view-main {
    padding: 16px;
    overflow: auto;
    height: 100%;
  }
  .mainBox {
    display: flex;
    flex: 1;
    height: 0;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    position: relative;
    .vueContainer {
      flex: 1;
      width: 0;
      background: #f0f3f6;
      height: 100%;
      display: flex;
      flex-direction: column;
      &.open-menu {
        opacity: 0;
      }
    }
    .mainContent-out {
      padding: 0px 9px;
      overflow: hidden;
      height: 100%;
    }

    .mainContent::-webkit-scrollbar {
      display: none;
    }
  }
}
.content {
  display: flex;
  text-align: left;
  text-indent: 2em;
  height: auto;
  width: 100%;
  position: fixed;
  bottom: 0px;
  z-index: 1014;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.2);
  .body {
    display: flex;
    align-items: center;
    line-height: 1.5;
    padding: 20px;
    color: #999;
    min-height: 100px;
  }
  .closeBox {
    display: flex;
    align-items: center;
    flex-flow: column nowrap;
    justify-content: center;
    padding: 0 20px;
    .cookie-btn {
      border-radius: 15px;
      width: 200px;
      font-size: 12px;
      background-color: #fff;
      border: 1px solid #2b6afd;
      color: #2b6afd;
      padding: 8px 12px;
      line-height: 14px;
      height: 32px;
    }
    .cookie-btn:hover {
      cursor: pointer;
      background: #2b6afd;
      color: #fff;
    }
  }
}
.cookie-btn:focus {
  color: #333;
  text-decoration: none;
}
button:focus {
  outline: 0;
}
.mainContent {
  flex: 1;
  overflow: auto;
  height: 100%;
  position: relative;
  z-index: 1;
  background: #fff;
  scrollbar-width: none;
}
.extend-menu-bar {
  width: 100%;
  background: #fff;
  padding-bottom: 4px;
  padding-top: 4px;
}
</style>
